<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
    <Card>
        <Card>
            <header>
                <span>身份证号:</span>
                <Input v-model="applyCondition.custIdNumber" style="width: 150px" />
                <span style="width: 200px;margin-left: 15px;">姓名:</span>
                <Input v-model="applyCondition.custName" style="width: 150px" />
                <span style="width: 200px;margin-left: 15px;">合同编号:</span>
                <Input v-model="applyCondition.contractId" style="width: 150px" />
                <span style="width: 200px;margin-left: 15px;">还款计划编号:</span>
                <Input v-model="applyCondition.planId" style="width: 150px" />
                <Button type="primary" @click="listQuery" style="margin-left: 15px;">查询</Button>
                <Button type="primary" @click="reset" style="margin-left: 15px;">重置</Button>
            </header>
        </Card>

        <Card>
            <Row type="flex" justify="center" align="middle" class="list-query">
                <!--<Table :columns="columns" :data="columnsData" style="width: 100%;" @on-row-click="applyDetailHistory"></Table>-->
                <Table :columns="columns" :data="columnsData" style="width: 100%;"></Table>
            </Row>

            <div style="margin-top: 36px;text-align: center;">
                <Page :total="applyCondition.total" :current="applyCondition.pageNum" :page-size="applyCondition.pageLength" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
            </div>
        </Card>

        <!--<Card>
            <Row type="flex" justify="center" align="middle" class="list-query">
                <Table :columns="columnsDetail" :data="dataDetail" style="width: 100%;"></Table>
            </Row>

            <div style="margin-top: 36px;text-align: center;">
                <Page :total="applyDetailCondition.total" :current="applyDetailCondition.pageNum" :page-size="applyDetailCondition.pageLength" size="small" show-elevator show-sizer show-total @on-change="pageChangeDeail" @on-page-size-change="sizeChangeDetail"></Page>
            </div>
        </Card>-->
        <Modal v-model="modal1" title="费用调整" @on-ok="ok" @on-cancel="cancel">
            <div class="adjust-apply-popup-style">
                <div class="adjust-apply-font-style">交易类型：</div>
                <div>
                    <Select v-model="adjustApply.transactionCode" class="v-select-wrapper" style="width:200px" @on-change="tradeTypeSelect" :label-in-value=true>
                        <Option v-for="item in tradeTypeList" :value="item.transactionCode" :key="item.transactionCode">{{ item.transactionName}}</Option>
                    </Select>
                </div>
            </div>
            <div class="adjust-apply-popup-style">
                <div class="adjust-apply-font-style">可调整金额：</div>
                <Input v-model="adjustApply.canAdjustAmount" style="width: 200px" :readonly='canAdjustAmountReadOnly' />
            </div>

            <div class="adjust-apply-popup-style">
                <div class="adjust-apply-font-style">调整金额：</div>
                <Input v-model="adjustApply.adjustAmount" style="width: 200px" />
            </div>

            <div class="adjust-apply-popup-style">
                <div class="adjust-apply-font-style">备注：</div>
                <Input v-model="adjustApply.remarks" style="width: 200px" />
            </div>

        </Modal>
    </Card>
</template>

<script>
export default {
  name: 'mutative-router',
  data () {
    return {
      modal1: false,
      canAdjustAmountReadOnly: false,
      applyCondition: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        custIdNumber: '',
        custName: '',
        contractId: '',
        planId: ''
      },
      adjustApply: {
        transactionCode: '',
        transactionName: '',
        canAdjustAmount: '',
        adjustAmount: '',
        remarks: '',
        planId: '',
        remainPenaltyFee: 0, // 剩余违约金
        remainLateFeeAct: 0, // 剩余滞纳金
        remainManagementFee: 0// 剩余管理费
      },
      applyDetailCondition: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        loanId: '',
        planId: ''
      },
      columns: [
        {
          type: 'index',
          title: '序号',
          width: 60
        },
        {
          title: '还款计划编号',
          key: 'planId',
          align: 'center',
          render: (h, params) => {
            return h('span', {
              // style: {
              //  'color': '#20a0ff',
              //  'cursor': 'pointer'
              // }
            }, params.row.planId)
          }
        },
        {
          title: '客户姓名',
          key: 'custName',
          align: 'center'
        },
        {
          title: '客户身份证号',
          key: 'custIdNumber',
          align: 'center'
        },
        {
          title: '期数',
          key: 'period',
          align: 'center'
        },
        {
          title: '罚费1（违约金）',
          key: 'penaltyFee',
          align: 'center'
        },
        {
          title: '罚费2（滞纳金）',
          key: 'lateFee',
          align: 'center'
        },
        {
          title: '操作',
          key: 'operation',
          align: 'center',
          render: (h, params) => {
            return h('Button', {
              props: {
                type: 'text',
                size: 'small'
              },
              style: {
                'color': '#20a0ff',
                'cursor': 'pointer'
              },
              on: {
                click: () => {
                  var vm = this
                  vm.modal1 = true
                  vm.adjustApply.planId = params.row.planId
                  vm.adjustApply.remainPenaltyFee = params.row.remainPenaltyFee// 剩余违约金 罚息1
                  vm.adjustApply.remainLateFeeAct = params.row.remainLateFeeAct// 剩余滞纳金  罚息2
                  vm.adjustApply.remainManagementFee = params.row.remainManagementFee// 剩余管理费
                }
              }
            }, '费用调整')
          }
        }
      ],

      columnsDetail: [
        {
          type: 'index',
          title: '序号',
          width: 60
        },
        {
          title: '申请编号',
          key: 'loanId',
          align: 'center'
        },
        {
          title: '申请日期',
          key: 'createdDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.createdDate))
            ])
          }
        },
        {
          title: '交易类型',
          key: 'transactionName',
          align: 'center'
        },
        {
          title: '交易金额',
          key: 'amount',
          align: 'center'
        },
        {
          title: '当前状态',
          key: 'status',
          align: 'center',
          render: (h, params) => {
            if (params.row.status === '0') {
              return h('span', {
                props: {
                  type: 'span',
                  size: 'small'
                }
              }, '待审批')
            } else if (params.row.status === '1') {
              return h('span', {
                props: {
                  type: 'span',
                  size: 'small'
                }
              }, '审批成功')
            } else if (params.row.status === '2') {
              return h('span', {
                props: {
                  type: 'span',
                  size: 'small'
                }
              }, '审批拒绝')
            }
          }
        },
        {
          title: '申请人',
          key: 'createdBy',
          align: 'center'
        },
        {
          title: '备注',
          key: 'remark',
          align: 'center'
        }
      ],

      columnsData: [
      ],
      dataDetail: [
      ],
      tradeTypeList: [
      ]

    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },
  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    this.queryTradeTypeList()
  },
  methods: {
    pageChange: function (pageNum) {
      var vm = this
      vm.applyCondition.pageNum = pageNum
      vm.listQuery()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.applyCondition.pageSize = pageLength
      vm.listQuery()
    },
    pageChangeDeail: function (pageNum) {
      var vm = this
      vm.applyDetailCondition.pageNum = pageNum
      vm.applyDetailHistoryPage()
    },
    sizeChangeDetail: function (pageLength) {
      var vm = this
      vm.applyDetailCondition.pageSize = pageLength
      vm.applyDetailHistoryPage()
    },
    queryTradeTypeList () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/penaltyAdjustment/service/tradeTypeList').then(re => {
        var data = re.data
        vm.tradeTypeList = data.data
      }).catch(er => {

      })
    },
    applyDetailHistory (row, index) {
      var vm = this
      vm.applyDetailCondition.planId = row.planId
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/penaltyAdjustment/service/penaltyAdjustmentHistory', vm.applyDetailCondition).then(re => {
        var data = re.data
        vm.dataDetail = data.data.list
        vm.applyDetailCondition.total = data.data.total
      }).catch(er => {

      })
    },
    applyDetailHistoryPage () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/penaltyAdjustment/service/penaltyAdjustmentHistory', vm.applyDetailCondition).then(re => {
        var data = re.data
        vm.dataDetail = data.data.list
        vm.applyDetailCondition.total = data.data.total
      }).catch(er => {

      })
    },
    listQuery () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/penaltyAdjustment/service/penaltyAdjustmentList', vm.applyCondition).then(re => {
        var data = re.data
        vm.columnsData = data.data.list
        vm.applyCondition.total = data.data.total
      }).catch(er => {

      })
    },
    reset () {
      var vm = this
      vm.applyCondition.custIdNumber = ''
      vm.applyCondition.custName = ''
      vm.applyCondition.contractId = ''
      vm.applyCondition.planId = ''
    },
    ok () {
      var vm = this
      var reg = /^\d+(?=\.{0,1}\d+$|$)/
      if (vm.adjustApply.transactionCode === '' || vm.adjustApply.transactionCode === null) {
        this.$Message.info('请选择交易类型')
        vm.feeAdjustClear()
        return
      }
      if (!reg.test(vm.adjustApply.adjustAmount)) {
        this.$Message.warning('代扣金额必须为正数')
        vm.feeAdjustClear()
        return
      }
      if (vm.adjustApply.adjustAmount > vm.adjustApply.canAdjustAmount) {
        this.$Message.info('调整金额不能大于可调整金额')
        vm.feeAdjustClear()
        return
      }
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/penaltyAdjustment/service/penaltyAdjustmentApply', vm.adjustApply).then(re => {
        var data = re.data
        var message = data.message
        this.$Message.info(message)
        vm.applyDetailHistoryPage()
      }).catch(er => {

      })
    },
    cancel () {
      this.feeAdjustClear()
    },
    feeAdjustClear () {
      var vm = this
      vm.adjustApply.transactionCode = ''
      vm.adjustApply.canAdjustAmount = ''
      vm.adjustApply.adjustAmount = ''
      vm.adjustApply.remarks = ''
    },
    tradeTypeSelect (object) {
      var vm = this
      var transactionCode = object.value
      if (transactionCode === 'management_fee_reducte') {
        vm.adjustApply.canAdjustAmount = vm.adjustApply.remainManagementFee
      } else if (transactionCode === 'penalty_fee_reducte') {
        vm.adjustApply.canAdjustAmount = vm.adjustApply.remainPenaltyFee
      } else if (transactionCode === 'late_fee_reducte') {
        vm.adjustApply.canAdjustAmount = vm.adjustApply.remainLateFeeAct
      } else if (transactionCode === '4') {
        vm.adjustApply.canAdjustAmount = '不限'
      } else if (transactionCode === '5') {
        vm.adjustApply.canAdjustAmount = '不限'
      } else if (transactionCode === '6') {
        vm.adjustApply.canAdjustAmount = '不限'
      } else {
        vm.adjustApply.canAdjustAmount = ''
      }
      vm.adjustApply.transactionName = object.label
      vm.canAdjustAmountReadOnly = true
    }
  }
}
</script>

<style>
.adjust-apply-font-style {
  float: left;
  margin-left: -43px;
  text-align: center;
  width: 121px;
}
.adjust-apply-popup-style {
  margin: 18px;
  width: 300px;
  margin-left: 24%;
  margin-top: 31px;
}
</style>
